<template>
  <div class="top">
    <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
      <use xlink:href="#icon-shangyiyehoutuifanhui-xianxingyuankuang"></use>
    </svg>
    <input
      type="text"
      v-model="searchKey"
      placeholder="使用回车键搜索"
      @keydown.enter="enterKey"
    />
  </div>
  <div class="history">
    <p>历史记录 <button @click="delHistory">清空记录</button></p>
    <span
      @click="searchHistory(item)"
      v-for="item in keyWorldList"
      :key="item"
      >{{ item }}</span
    >
  </div>
  <div class="musicList">
    <div class="item" v-for="(item, i) in searchList" :key="i">
      <div class="itemLeft" @click="updateIndex(item)">
        <span class="leftSpan">{{ i + 1 }}</span>
        <div>
          <p>{{ item.name }}</p>
          <span v-for="(item1, index) in item.artists" :key="index">{{
            item1.name
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSearchMusic } from "@/request/api/home";
export default {
  data() {
    return {
      keyWorldList: [],
      searchKey: "",
      searchList: [],
    };
  },
  mounted() {
    this.keyWorldList = JSON.parse(localStorage.getItem("keyWorldList"))
      ? JSON.parse(localStorage.getItem("keyWorldList"))
      : [];
  },
  methods: {
    enterKey: async function () {
      if (this.searchKey != "") {
        this.keyWorldList.unshift(this.searchKey);
        // 去重  使用ES6
        this.keyWorldList = [...new Set(this.keyWorldList)];
        // 固定长度 限制长度
        if (this.keyWorldList.length > 9) {
          this.keyWorldList.splice(this.keyWorldList.length - 1, 1);
        }
        localStorage.setItem("keyWorldList", JSON.stringify(this.keyWorldList));
        let res = await getSearchMusic(this.searchKey);
        console.log(res);
        this.searchList = res.data.result.songs;
        this.searchKey = "";
      }
    },
    delHistory: function () {
      localStorage.removeItem("keyWorldList");
      this.keyWorldList = [];
    },
    searchHistory: async function (item) {
      let res = await getSearchMusic(item);
      console.log(res);
      this.searchList = res.data.result.songs;
    },
    updateIndex: function (item) {
      item.al = item.album;
      item.al.picUrl = item.album.artist.img1v1Url;
      this.$store.commit("pushPlayList", item);
      this.$store.commit(
        "updataPlayListIndex",
        this.$store.state.playList.length - 1
      );
    },
  },
};
</script>
<style lang="less">
.top {
  width: 100%;
  height: 1rem;
  padding: 0.2rem;
  display: flex;
  align-items: center;
  input {
    margin-left: 0.4rem;
    border: none;
    border-bottom: 0.02rem solid black;
    width: 80%;
    padding: 0.1rem;
  }
}
.history {
  width: 100%;
  padding: 0.2rem;
  p {
    display: flex;
    justify-content: space-between;
    font-size: 0.35rem;
  }
  span {
    padding: 0.1rem 0.2rem;
    background-color: rgb(184, 180, 180);
    border-radius: 40px;
    margin: 0.1rem 0.2rem;
    display: inline-block;
  }
}
.musicList {
  padding: 0.3rem;
  width: 100%;
  div {
    p {
      width: 4.54rem;
      height: 0.4rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 700;
    }
    span {
      font-weight: 400;
      font-size: 0.24rem;
      color: #999;
    }
    margin-left: 0.2rem;
  }
  .item {
    width: 100%;
    height: 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .itemLeft {
    width: 85%;
    height: 100%;
    display: flex;
    align-items: center;
    .leftSpan {
      display: inline-block;
      width: 0.2rem;
      text-align: center;
      font-size: 0.3rem;
    }
  }
}
</style>
